<template>
	<div>
		<div class="my_userHeader">
			<p><img src="static/image/avatar_01.jpg"></p>
			<ul class="user_hd">
				<li class="names">{{userInfo.userName}}</li>
				<li>{{userInfo.mobile}}</li>
			</ul>
		</div>
			
		<div class="my_userContent">
			<mu-divider/>
			<mu-list>
				<mu-sub-header>我的</mu-sub-header>
			    <mu-list-item title="资料修改" @click="goto('changeInfo')">
	    			<mu-icon value="chevron_right" color="#333" slot="right"/>
			    </mu-list-item>
			    <mu-list-item title="密码修改" @click="goto('changePassword')">
	    			<mu-icon value="chevron_right" color="#333" slot="right"/>
			    </mu-list-item>
			    <mu-list-item title="提醒设置" @click="tips"></mu-list-item>
			</mu-list>
			<mu-divider/>
			<mu-list>
				<mu-sub-header>其它设置</mu-sub-header>
			    <mu-list-item title="隐私声明" @click="tips"></mu-list-item>
			    <mu-list-item title="帮助中心" @click="tips"></mu-list-item>
			    <mu-list-item title="关于我们" @click="tips"></mu-list-item>
			</mu-list>
			<mu-divider/>
			<div style="padding: 15px;">
				<mu-raised-button @click="logout" label="退出登录" class="demo-raised-button"
					fullWidth secondary style="height: 42px;"/>
			</div>
		</div>

		<mu-snackbar v-if="snackbar" message="此功能开发中，尚未开放，敬请期待！" @actionClick="tipsClose" @close="tipsClose"/>

		<!-- alertDialog -->
		<alerts-dialog :alertData="alertDialog"></alerts-dialog>
	</div>
</template>

<script>
export default{
	data(){
		return {
			userInfo: this.$store.state.userInfo,
      		snackbar: false,
      		alertDialog: {}
		}
	},
	methods:{
		//页面跳转
		goto(str){
			switch(str){
				case 'changeInfo':
					this.$store.commit('setInfoType', '个人信息');
					this.$router.push('/member/changeInfo/infoList');
					break;
				case 'changePassword':
					this.$store.commit('setInfoType', '修改密码');
					this.$router.push('/member/changeInfo/password');
					break;
				default: break;
			}
		},
		//退出登录
		logout(){
			this.alertDialog = {
				openState: true,
				content: '注销成功！将返回登录页...'
			}
			this.$store.state.userInfo = {};
			localStorage.mobile = '';
			let me = this;
			setTimeout(function(){
				me.$router.push('/login');
			}, 1000)
		},
		//开发中提示
		tips () {
	      this.snackbar = true
	      if (this.snackTimer) clearTimeout(this.snackTimer)
	      this.snackTimer = setTimeout(() => { this.snackbar = false }, 2000)
	    },
	    tipsClose () {
	      this.snackbar = false
	      if (this.snackTimer) clearTimeout(this.snackTimer)
	    },
	},
	mounted(){
	}
}
</script>